<template>
  <div id="index" class="view">
    <div class="rightContainer">
      <tags></tags>
      <!-- todo -->
      <div v-if="false" class="box" style="flex: 1;margin-bottom: 8px;"></div>
    </div>
    <div class="leftContainer">
      <div class="box searchAddContainer">
        <div v-if="false" class="searchBtn" style="margin-left: 8px;">
          <i class="iconfont icon-redu" style="font-size: 18px !important;"></i>
        </div>
        <div v-if="false" class="searchBtn">
          <i class="iconfont icon-shijian" style="font-size: 18px !important;"></i>
        </div>
        <div class="searchTagContainer">
          <div :key="item.id" class="tag" v-for="(item,index) in searchTags">
            <div class="tagText">{{item.title}}</div>
            <div @click.stop="closeTag(index)" class="tagClose">
              <i class="iconfont icon-guanbi" style="font-size: 14px !important;"></i>
            </div>
          </div>
        </div>
        <div :class="searchFocus?'searchContainerFocus':'searchContainer'">
          <div class="searchInput" style="background: transparent;">
            <input
              autocomplete="off"
              @keyup.13="search(false)"
              v-model="searchText"
              placeholder="请输入搜索内容"
              @focus="searchFocus = true"
              @blur="searchFocus = false"
              class="textInput"
              type="text"
            />
          </div>
          <div @click="search(false)" class="searchBtn">
            <i class="iconfont icon-search"></i>
          </div>
        </div>
        <div style="flex: 1;"></div>
        <div @click="addFlower" class="btn">添加思想火花</div>
      </div>
      <div class="indexListContainer box">
        <div class="noDataTip" v-if="flowers.length<1">
          <div>思想火花空空如也...</div>
          <div @click="addFlower" class="btn center" style="width: 80px;">添加思想火花</div>
        </div>
        <floweritem :key="item.id" :item="item" :index="index" v-for="(item,index) in flowers"></floweritem>
      </div>
    </div>
  </div>
</template>
<script>
const fs = require("fs");
const path = require("path");
const electron = require("electron");
import floweritem from "../components/floweritem";
import list from "./mixins/list";
export default {
  mixins: [list],
  components: {
    floweritem
  },
  data() {
    return {
      flowers: [],
      content: "",
      editingIndex: -1,
      newTagIndex: -1
    };
  },
  methods: {
    async addFlower() {
      let now = new Date();
      let flower = {
        content: "",
        updated_at: now,
        created_at: now
      };
      await this.db("flowers").insert(flower);
      this.search();
      this.bus.$emit("flowerCount");
      this.$nextTick(() => {
        this.editingIndex = 0;
        this.$nextTick(() => {
          setTimeout(function() {
            document.querySelector("textarea").focus();
          }, 300);
        });
      });
    },
    async getFlowerTag(items) {
      var fids = items.map(v => v.id);
      let fts = await this.db("flower_tag").whereIn("flower_id", fids);
      fts.forEach(ft => {
        let flower = items.find(v => v.id == ft.flower_id);
        let tag = this.$root.tags.find(v => v.id == ft.tag_id);
        flower.tags.push(tag);
      });
    },
    async search(isGetMore) {
      if (this.searchText.length > 36) {
        swal({
          icon: "error",
          text: "您输入的内容太长了"
        });
        return;
      }
      if (!isGetMore) {
        this.flowers = [];
      }
      let query = this.db("flowers")
        .limit(38)
        .orderBy("updated_at", "desc")
        .offset(this.flowers.length);
      if (this.searchText.trim().length > 0) {
        let titleSearchArr = this.searchText
          .trim()
          .replace(/\s+/gi, "^")
          .split("^");
        titleSearchArr.forEach(v => {
          query = query.andWhere("content", "like", "%" + v + "%");
        });
      }
      let result = [];
      if (this.searchTags.length > 0) {
        let tagIds = this.searchTags.map(v => v.id);
        let ftRows = await this.db("flower_tag").whereIn("tag_id", tagIds);
        let flowerIds = ftRows.map(v => v.flower_id);
        flowerIds = Array.from(new Set(flowerIds));
        result = await query.whereIn("id", flowerIds);
      } else {
        result = await query.then();
      }
      if (result.length < 1) return;
      result.forEach(v => (v.tags = []));
      this.getFlowerTag(result);
      this.flowers = this.flowers.concat(result);
    }
  }
};
</script>
<style scoped lang="scss">
.addBoxInnerDiv {
  width: 360px;
  margin-left: auto;
  box-shadow: 0 1px 3px rgba(26, 26, 26, 0.2);
  margin-top: 60px;
  margin-right: auto;
  background: #fff;
  border-radius: 6px;
}

.saveBtn {
  float: right;
  margin-bottom: 8px;
  width: 58px;
  text-align: center;
}

.ta {
  height: 82px;
  padding-top: 8px;
  padding-bottom: 8px;
  line-height: 26px;
  width: calc(100% - 16px);
}
</style>